<template>
  <div class="directory">
    <el-collapse accordion>
      <el-collapse-item :name="item.course_id" v-for="(item, index) in directoryList" :key="index">
        <template slot="title">
          <el-tag size="mini" :class="courseTypeClass[item.course_type]" effect="dark">{{
            item.course_type_text
          }}</el-tag>
          <div class="title">{{ item.title }}</div>
        </template>
        <CourseDirectory
          :course_id="item.course_id"
          :classId="classId"
          v-bind="$attrs"
        ></CourseDirectory>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import CourseDirectory from '@/views/course/components/courseDirectory'
export default {
  props: {
    classId: {
      type: Number,
      default: 0
    }
  },
  components: {
    CourseDirectory
  },
  data() {
    return {
      directoryList: [],
      courseTypeClass: { 1: 'video', 2: 'live', 3: 'multipart', 4: 'classes' }
    }
  },
  created() {
    // 获取班级目录
    this.$api.getCourseClassesMenu(this.$route.params.id, res => {
      this.directoryList = res.data
    })
  }
}
</script>

<style lang="scss" scoped>
.directory {
  .el-tag {
    margin-right: 10px;
    &.video {
      background-color: #ff8a8a;
      border-color: #ff8a8a;
    }
    &.live {
      background-color: #67c23a;
      border-color: #67c23a;
    }
    &.multipart {
      background-color: #80ccff;
      border-color: #80ccff;
    }
    &.classes {
      background-color: #ff8a52;
      border-color: #ff8a52;
    }
  }
  ::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
    .el-icon-arrow-right:before {
      content: '\e791';
      @include edu-color-auxiliary;
      font-size: 20px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__header.is-active {
      border-bottom-color: $border-color-divider;
    }
  }
  .title {
    @include ellipsis;
    max-width: 600px;
  }
}
</style>
